<script>
import { reactive, toRefs } from "vue";
import FlowhNW10to14 from "@/components/Charts/LineCharts/inoutFlow/NW/FlowhNW10to14.vue";
import FlowhNW14to18 from "@/components/Charts/LineCharts/inoutFlow/NW/FlowhNW14to18.vue";
import FlowhNW18to22 from "@/components/Charts/LineCharts/inoutFlow/NW/FlowhNW18to22.vue";
import GenBagNW from "@/components/Charts/LineCharts/inoutFlow/NW/GenBagNW.vue";
export default {
  components: {FlowhNW10to14,FlowhNW14to18,FlowhNW18to22,GenBagNW,
  },
  setup() {
    const state = reactive({
      labelListNW10to14: ["10:00", "11:00", "12:00", "13:00", "14:00"],
      labelListNW14to18: ["14:00", "15:00", "16:00", "17:00", "18:00"],
      labelListNW18to22: ["18:00", "19:00", "20:00", "21:00", "22:00"],
      dataListFlowNW10to14: [
        175,150, 230, 224, 218, 135, 200, 129, 208, 125,
      ],
      dataListFlowNW14to18:[
      160, 208, 125, 109, 170, 159, 209, 109, 201, 175,      
      ],
      dataListFlowNW18to22:[
      100, 209, 109, 201, 175, 208, 125, 109, 170, 159, 
      ],
      
      dataListGBNW:[100, 209, 109, 201],
    });
    return { ...toRefs(state) };
  },
}
</script>
<template>
 <div style="display: flex; height:50%">
   <FlowhNW10to14 :labelListNW10to14="labelListNW10to14" :dataListFlowNW10to14="dataListFlowNW10to14" />
   <FlowhNW14to18 :labelListNW14to18="labelListNW14to18" :dataListFlowNW14to18="dataListFlowNW14to18" />
   <FlowhNW18to22 :labelListNW18to22="labelListNW18to22" :dataListFlowNW18to22="dataListFlowNW18to22" />
 </div>
 <div style="display: flex; height:50%">
  <GenBagNW :dataListGBNW="dataListGBNW" />
 </div>
</template>
<style scoped>
</style>

























<!-- <script>
  环形图和饼状图实例
import { reactive, toRefs } from "vue";

import PieChart from "@/components/Charts/PieChart.vue";
import RingChart from "@/components/Charts/RingChart.vue";
import LineChartBaghN from "@/components/Charts/LineCharts/Hours/Bags/LineChartBaghN.vue";
export default {
  components: { PieChart,RingChart },
  setup() {
    const state = reactive({
      labelList: ["Mon", "Tue", "Wed", "Thu", "Fri"],
      dataList: [150, 230, 224, 218, 135],
      title: "出入口客流统计",
    });

    return { ...toRefs(state) };
  },
};
</script>

<template>
  <div style="display: flex; height: 50%">
    <PieChart :title="title" :labelList="labelList" :dataList="dataList" /> 
  </div>
  <div style="display: flex; height: 50%">
    <RingChart :title="title" :labelList="labelList" :dataList="dataList" />
  </div>

</template>

<style scoped>
</style> -->